<template>
  <Drawer
    v-model="show"
    :title="'计划详情'"
    :size="540"
    @close="show = false"
  >
    <template #content>
      <ContentItemWrap>
        <template #title>基本信息</template>
        <template #content>
          <section class="px-24px">
            <div class="flex">
              <div class="label">计划编号</div>：
              <div class="text">{{ detail.planNo }}</div>
            </div>
            <div class="flex">
              <div class="label">所属企业</div>：
              <div class="text">{{
                detail.tenantName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">中转客户</div>：
              <div class="text">{{
                detail.purchaserName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">供应商</div>：
              <div class="text">{{
                detail.supplierName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">煤源</div>：
              <div class="text">{{
                detail.coalSourceName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">产品</div>：
              <div class="text">{{
                detail.productName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">产品价格</div>：
              <div class="text"
                >{{
                  detail.productPrice
                    ? detail.productPrice / 100
                    : 0
                }}元/吨</div
              >
            </div>
          </section>
        </template>
      </ContentItemWrap>
      <ContentItemWrap>
        <template #title>业务信息</template>
        <template #content>
          <section class="px-24px">
            <div class="flex">
              <div class="label">装货地址</div>：
              <div class="text">{{
                detail.loadingSiteName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">卸货地址</div>：
              <div class="text">{{
                detail.landingPlaceName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">卸货点</div>：
              <div class="text">{{
                detail.landingPointName || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">开始时间</div>：
              <div class="text">{{
                detail.startTime || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">结束时间</div>：
              <div class="text">{{
                detail.endTime || ''
              }}</div>
            </div>
            <div class="flex">
              <div class="label">拉运数量</div>：
              <div class="text"
                >{{
                  detail.totalTransactionVolume || 0
                }}吨</div
              >
            </div>
            <div class="flex">
              <div class="label">结算依据</div>：
              <div class="text"
                >{{
                  getJLDictLabel(
                    DICT_TYPE.WEIGHT_SETTLEMENT_BASIS,
                    detail.weightSettlementBasis
                  )
                }}
              </div>
            </div>
            <div class="flex">
              <div class="label">购销属性</div>：
              <div class="text"
                >{{
                  getJLDictLabel(
                    DICT_TYPE.BUY_SELL_ATTRIBUTE,
                    detail.purchaseAndSalesAttributes
                  )
                }}
              </div>
            </div>
          </section>
        </template>
      </ContentItemWrap>
      <ContentItemWrap v-if="isPassShow">
        <template #title>一码通</template>
        <template #content>
          <section class="px-24px">
            <div class="flex">
              <div class="label">销售所属企业</div>：
              <div class="text">{{
                detail.saleTenantName || '-'
              }}</div>
            </div>
            <div class="flex">
              <div class="label">销售客户企业</div>：
              <div class="text">{{
                detail.saleCustomerName || '-'
              }}</div>
            </div>
            <div class="flex">
              <div class="label">销售产品</div>：
              <div class="text">{{
                detail.saleProductNames || '-'
              }}</div>
            </div>
          </section>
        </template>
      </ContentItemWrap>
    </template>
    <template #footer>
      <el-button type="primary" @click="closeDrawer">
        关闭
      </el-button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import * as purchasePlanApi from '@/api/purchasePlan'
import { DICT_TYPE, getJLDictLabel } from '@/utils/dict'

const show = ref(false)
const isPassShow = ref(false)
const detail = ref({})

const open = async (id, isShow) => {
  isPassShow.value = isShow
  const data = await purchasePlanApi.getDispatchDetail({
    id
  })
  detail.value = data || {}
  show.value = true
}

const closeDrawer = () => {
  show.value = false
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
section {
  margin: 16px 0 24px 0;

  > div + div {
    margin-top: 10px;

    .label {
      width: 90px;
      color: #606266;
      text-align-last: justify;
    }

    .text {
      flex: 1;
      width: 0;
      color: #303133;
      margin-left: 4px;
    }
  }
}
</style>
